<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px; margin-left:200px">
    <legend>个人资料</legend>
</fieldset>

<form class="layui-form" lay-filter="dataFrm" id="dataFrm" style="width: 600px; height: 500px;margin: 20px auto">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="hidden" id="userid" name="userid">
            <input type="text" id="realname" name="realname" placeholder="请输姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证</label>
        <div class="layui-input-block">
            <input type="text" id="identity" name="identity" lay-verify="title" autocomplete="off" placeholder="请输入身份证" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block">
            <input type="text" id="address" name="address" lay-verify="title" autocomplete="off" placeholder="请输入地址" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-block">
            <input type="text" id="phone" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入联系方式" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男">
            <input type="radio" name="sex" value="0" title="女">
        </div>
    </div>

    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">保存</button>
            <button type="button" id="pwd" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >修改密码</button>
        </div>
    </div>
    <!-- 修改的弹出层开始 -->
    <div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
        <form class="layui-form"  lay-filter="dataFrm" id="dataPwd">
            <div class="layui-form-item">
                <label class="layui-form-label">输入旧密码</label>
                <div class="layui-input-block">
                    <input type="hidden" id="loginname" name="loginname"/>
                    <input type="password" id="jpwd" name="pwd" lay-verify="title" autocomplete="off" placeholder="请输入旧密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输入新密码</label>
                <div class="layui-input-block">
                    <input type="password" id="pwd1" name="pwd1" lay-verify="title" autocomplete="off" placeholder="请输入新密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" id="pwd2" name="pwd2" lay-verify="title" autocomplete="off" placeholder="确认密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center; margin-left: 0">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="qwe">保存</button>
                    <button type="button" id="guanbi" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-close" >取消修改</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 修改的弹出层结束 -->
    <script type="text/javascript">
        layui.extend({
            dtree:'../../../js/layui_ext/dist/dtree'
        }).use([ 'jquery', 'layer', 'form', 'dtree'  ], function() {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;

            // 从后端获取用户信息
            $.get("/web/toUpdateLogin",{userid:JSON.parse(sessionStorage.getItem('userInfo'))?.userid}, function(data) {
                if (data.success) {
                    var user = data.entity[0];
                    $("#userid").val(user.userid);
                    $("#realname").val(user.realname);
                    $("#identity").val(user.identity);
                    $("#address").val(user.address);
                    $("#phone").val(user.phone);
                    $("#loginname").val(user.loginname);

                    // 设置性别单选框选中状态
                    $('input:radio[name="sex"][value="' + user.sex + '"]').prop('checked', true);
                    form.render('radio'); // 重新渲染单选框

                } else {
                    layer.msg("获取用户信息失败");
                }
            });

            // 保存
            form.on("submit(doSubmit)", function() {
                layer.confirm('确定修改吗', function() {
                    // 序列化表单数据
                    var params = $("#dataFrm").serialize();

                    $.post("/web/user/editLogin", params, function(response) {
                        layer.msg(response);
                        setTimeout(function() {
                            location.reload();
                        }, 1000);
                    });
                });
            });
            var op;
            $("#pwd").click(function () {
                op = layer.open({
                    type: 1,
                    title: "修改密码",
                    area: ['500px', '300px'],
                    content: $("#saveOrUpdateDiv") // 这里 content 是一个普通的 String
                });
            });
            // 关闭窗口
            $("#guanbi").click(function() {
                layer.close(op);
            });
            $("#qwe").click(function() {
                var loginname = $("#loginname").val();
                var pwd = $("#jpwd").val();
                var pwd1 = $("#pwd1").val();
                var pwd2 = $("#pwd2").val();
                if (pwd === "" || loginname === "" || pwd1 === "") {
                    layer.msg("不能为空");
                    return false;
                } else if (pwd1 !== pwd2) {
                    layer.msg("密码不一致");
                    return false;
                }
                $.post("/web/user/editPwd", {loginname: loginname, pwd: pwd, pwd1: pwd1}, function(obj) {
                    console.log("obj:", typeof obj)
                    if (obj == 1) {
                        setTimeout(function() {
                            window.parent.location.href = "/page/login-1.html"; // #设定跳转的链接地址
                        }, 1000);

                        layer.msg("修改成功", {
                            time: 3000 // 取消自动关闭
                        });  // 显示倒计时

                        // layer.close(op);
                        return false;
                    } else {
                        layer.msg("旧密码错误");
                        return false;
                    }
                });
            });
        });
    </script>
</html>